<!-- 直接从微信进绑定页 -->
<template>
    <div>
        <head-nav :isBack="isBack"></head-nav>
        <!-- 占位 -->
        <div class="zanwei-top"></div>
        <!-- <div class="hyts">
          <p class="hynh">亲爱的会员您好</p>
          <p class="tswz">为了更好的更新您的积分和相关权益，请完善以下信息</p>
        </div> -->
        <div class="perfectinput">
            <ul>
                <li>
                    <mt-field v-model="userlist.phone" label="手机号" placeholder="请输入手机号" type="tel"></mt-field>
                </li>
                <li class="yzm">
                    <mt-field v-model="userlist.hycode" label="验证码"></mt-field>
                    <div @click="getcode">
                        <mt-button type="primary" size="large" @click.native="getcode"
                                   :style="backgroundColor"
                                   v-html="yzmtext"></mt-button>
                    </div>
                    <!--<a id="btn" type="button" :disabled="disabled" @click="getcode" v-html="yzmtext" :class="{'is-disabled': disabled}"></a>-->
                </li>
                <!-- <div class="line20"></div> -->
                <!-- <li>
                  <mt-field v-model="userlist.name" label="您的姓名" placeholder="请输入您的姓名" type="text" >
                  </mt-field>
                </li> -->
                <li class="mint-cell-wrapper ndxb">
                    <div class="title">您的性别</div>
                    <div class="mint-cell-value value">
                        <mt-radio v-model="userlist.sex" :options="['男', '女']">
                        </mt-radio>
                    </div>
                </li>
                <li>
                    <mt-field v-model="userlist.vipcode" label="会员卡号" placeholder="请输入您的会员卡号" type="text"
                              disabled></mt-field>
                </li>
                <!-- <li>
                  <mt-field v-model="userlist.idCard" label="身份证号" placeholder="请输入您的身份证号码" type="text">
                  </mt-field>
                </li> -->
                <!-- <li>
                  <mt-field v-model="userlist.address" label="所在市/区" placeholder="请输入您的所在市/区" type="text">
                  </mt-field>
                </li> -->

            </ul>

            <ul>
                <!-- <li class="yhxy">
                  注册成功即视为同意
                  <router-link :to="'agreement'"> 用户注册协议</router-link>
                </li> -->
                <li class="zcbtn">
                    <mt-button type="primary" size="large" @click.native="bindfn">立即绑定</mt-button>
                </li>
            </ul>
        </div>
        <!-- 弹出注册成功 -->
        <div class="zccg" v-show="cgts">
        	<!-- 背景 -->
            <div class="zccgbg"></div>
            <div class="zccgbox">
                <img class="ph" :src="bdcgimg">
                <!--<div class="zero" @click="gofn('/willsave/2c912ccd641c5c0501641c70ad4f0025')"></div>-->
                <div v-show="!ewmpage" class="btnbox">
                	<div v-show="btn1name != ''" class="one tobtn" @click="gofn(btn1url)">{{btn1name}}</div>
	                <div v-show="btn2name != ''" class="two tobtn" @click="gofn(btn2url)">{{btn2name}}</div> 
	                <div v-show="btn3name != ''" class="three tobtn" @click="gofn(btn3url)">{{btn3name}}</div>
                </div>
                <div v-show="ewmpage" class="ewmBtn" @click="lookEwm"></div>
            </div>
        </div>
        
        <div class= "zcewm" v-show="ewmshow" @click="nolook">
        	<img @click.stop="stopTap" :src="relewmimg"/>
        </div>
    </div>
</template>

<script>
    import api from "../../api/api.js";
    import {MessageBox, Toast} from "mint-ui";

    export default {
        data() {
            return {
                yzmtext: "获取验证码",
                isBack: false,
                disabled: false,
                cgts: false,
                cgtsimg: "",
                userlist: {
                    phone: "",
                    hycode: "",
                    name: "",
                    sex: "",
                    xfvipcode: "",
                    vipcode: "",
                    idCard: "",
                    address: ""
                },
                ewmshow: false,
                btn1name: '',
                btn1url: '',
                btn2name: '',
                btn2url: '',
                btn3name: '',
                btn3url: '',
                relewmimg: '',
                ewmpage: false,
                zccgimg: "",
                bdcgimg: ''
            };
        },
        methods: {
        	stopTap() {
        		console.log('stop');
        	},
        	// 关闭二维码
        	nolook() {
        		this.ewmshow = false;
        	},
        	// 打开二维码
        	lookEwm() {
        		console.log(1);
        		this.ewmshow = true;
        	},
            gofn(url) {
                if (url.indexOf('http') === -1) {
            		this.$router.push(url);
            	} else {
            		location.href = url;
            	}
            },
            getcode() {
                try {
                    var that = this;
                    if (this.userlist.phone == "") {
                        Toast("请输入您的手机号");
                    } else if (this.userlist.phone.length != 11) {
                        Toast("请输入正确的手机号");
                    } else {
                        // 获取验证码
                        var phone = this.userlist.phone;
                        api.sendActiveCode(this, phone, function (res) {
                            let data = res.data;
                            console.log(data);
                            if (data.code == 0) {
                                if (data.data == null) {
                                    // 没数据新数据
                                } else {
                                    // console.log(that.userlist.hycode);
                                    // 老会员需要绑定
                                    if (JSON.stringify(data.data) == "{}") {
                                        Toast({
                                            message: "您还不是我们的会员,请先注册！",
                                            duration: 3000
                                        });
                                        setTimeout(function () {
                                            // 跳转到绑定
                                            that.$router.push({path: "/register", query: {phone: that.userlist.phone,type: 'fansbind'}});
                                        }, 3000);
                                    } else if (
                                        data.data.XF_ISNEW == 1 &&
                                        data.data.XF_ISONLINE == 1
                                    ) {
                                        // 绑定过提示已经绑定
                                        MessageBox({
                                            title: "提示",
                                            message: "您已经绑定过了，去逛逛",
                                            showCancelButton: true,
                                            showCancelButton: false,
                                            confirmButtonText: "去逛逛",
                                            closeOnClickModal: false,
                                            confirmButtonClass: "zcbtn"
                                        }).then(action => {
                                            // 跳转到积分列表
                                            that.$router.push({path: "/score"});
                                        });
                                    } else {
                                        //未绑定继续绑定
                                        // 老数据
                                        let olduserlist = data.data;

                                        // 数据转换
                                        if (olduserlist.XF_SEX == "M") {
                                            olduserlist.XF_SEX = "男";
                                        } else {
                                            olduserlist.XF_SEX = "女";
                                        }
                                        that.userlist = {
                                            // name: olduserlist.XF_SURNAME,
                                            sex: olduserlist.XF_SEX,
                                            hycode: "",
                                            phone: olduserlist.XF_TELEPHONE,
                                            vipcode: olduserlist.XF_VIPCODE
                                            // idCard: olduserlist.XF_VIPID,
                                            // address: olduserlist.XF_ADDRESS1
                                        };
                                        console.log(that.userlist);

                                        // 获取验证码倒计时
                                        var time;
                                        var djs = 60;
                                        var yzmtext;
                                        that.disabled = true;
                                        // this.yzmtext = djs + "秒后重发";

                                        time = setInterval(() => {
                                            that.disabled = true;
                                            if (djs > 0) {
                                                djs--;
                                                that.yzmtext = djs + "秒后重发";
                                            } else {
                                                clearInterval(time);
                                                that.disabled = false;
                                                that.yzmtext = "获取验证码";
                                            }
                                        }, 1000);
                                        Toast({
                                            message: "验证码已发送,请注意查收!",
                                            duration: 2000
                                        });
                                    }
                                }

                            } else if (data.code == -2) {
                                Toast({
                                    message: data.msg,
                                    duration: 2000
                                });
                                // setTimeout(function() {
                                //   // 跳转到绑定
                                //   that.$router.push({ path: "/bind" });
                                // }, 2000);
                            } else {
                                Toast({
                                    message: data.msg,
                                    duration: 2000
                                });
                            }
                        });
                    }
                } catch (e) {

                }

            },
            // 绑定
            bindfn() {
                let that = this;
                //地址栏获取员工参数
                let ygobj = this.$route.query;
                if (ygobj.ygname == undefined) {
                    ygobj.ygname = "";
                } else if (ygobj.ygcode == undefined) {
                    ygobj.ygcode = "";
                }
                //地址栏获取员工参数end
                let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
                userinfo.vipcode = this.userlist.vipcode;
                sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
                if (this.userlist.phone == "") {
                    this.Toastfn("请输入您的手机号", 2000);
                } else if (this.userlist.phone.length != 11) {
                    this.Toastfn("请输入正确的手机号", 2000);
                } else if (this.userlist.hycode == "") {
                    this.Toastfn("请输入验证码", 2000);
                } else if (this.userlist.sex == "") {
                    this.Toastfn("请输入性别", 2000);
                } else {
                    let sex;
                    if (this.userlist.sex == "男") {
                        sex = "M";
                    } else {
                        sex = "F";
                    }
                    var fromdata = {
                        name: this.userlist.name || '',
                        sex: sex,
                        phone: this.userlist.phone,
                        vipcode: this.userlist.vipcode,
                        idCard: this.userlist.idCard || '',
                        address: this.userlist.address || '',
                        hyCode: this.userlist.hycode,
                        ygname: ygobj.ygname || '', //员工name
                        ygcode: ygobj.ygcode || '' //员工编号
                    };

                    api.bindingold(this, fromdata, function (res) {
                        let data = res.data;
                        console.log(res);
                        if (data.code == 0) {
                            // 判断是否关注过
					            api.getUserSubscribe(that, userinfo.openid, function (isres) {
					            	console.log('是否关注过')
					            	console.log(isres);
					            	let isdata = isres.data;
					            	if (isdata.code === 0) {
					            		if (isdata.data === "1") {// 关注过
					            			// 通过type值判断是否是别的地方跳转过来的
	                                        if (that.$route.query.type === undefined) {
	                                        	that.cgts = true;
						            			that.ewmpage = false;
						            			api.getSysConfig(that, function (sysres) {
									            	console.log('系统设置')
									            	console.log(sysres);
									            	let sysdata = sysres.data.data;
									            	that.btn1name = sysdata.BUT1;
									            	that.btn1url = sysdata.BUT1URL;
									            	that.btn2name = sysdata.BUT2;
									            	that.btn2url = sysdata.BUT2URL;
									            	that.btn3name = sysdata.BUT3;
									            	that.btn3url = sysdata.BUT3URL;
									            	// 注册成功(出现按钮)
									            	that.zccgimg = that.host.filehost + sysdata.CGYM[0].ID;
									            	// 绑定成功(出现按钮)
									            	that.bdcgimg = that.host.filehost + sysdata.BDCGYM[0].ID;
									            });
	                                        } else {
	                                        	if (that.$route.query.type === "game") {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		location.href = that.isGameUrl;
		                                        	});
	                                        	} else {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		that.$router.go(-1);
		                                        	});
	                                        	}
	                                        }
					            			
					            		} else {// 未关注过
					            			// 通过type值判断是否是别的地方跳转过来的
	                                        if (that.$route.query.type === undefined) {
	                                        	that.cgts = true;
						            			that.ewmpage = true;
						            			api.getSysConfig(that, function (sysres) {
									            	console.log('系统设置')
									            	console.log(sysres);
									            	let sysdata = sysres.data.data;
									            	// 二维码图片
									            	that.relewmimg = that.host.filehost + sysdata.GZHRWM[0].ID;
									            	// 注册成功(出现二维码)
									            	that.zccgimg = that.host.filehost + sysdata.ZCGZTP[0].ID;
									            	// 绑定成功(出现二维码)
									            	that.bdcgimg = that.host.filehost + sysdata.BDCGGZ[0].ID;
									            });
		                                        
	                                        } else {
	                                        	if (that.$route.query.type === "game") {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		location.href = that.isGameUrl;
		                                        	});
	                                        	} else {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		that.$router.go(-1);
		                                        	});
	                                        	}
	                                        }
					            			
					            		}
					            	} else {
					            		that.Toastfn(isdata.msg, 2000);
					            	}
					            });
                        } else {
                            that.Toastfn(data.msg, 2000);
                        }
                    });
                }
            },
            jrqbfn() {
                //跳转到钱包
                this.$router.push({path: "/wallet"});
            },
            // 提示函数
            Toastfn(message, duration, position) {
                Toast({
                    message: message,
                    duration: duration,
                    position: position
                });
            }
        },
        created() {
            let that = this;
            let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
            
            console.log(userinfo);
            if (userinfo == null) {
                // 如果缓存kong
                // 还魏注册
                MessageBox({
                    title: "提示",
                    message: "您还不是我们的会员,请先注册！",
                    showCancelButton: true,
                    showCancelButton: false,
                    confirmButtonText: "去注册",
                    closeOnClickModal: false,
                    confirmButtonClass: "zcbtn"
                }).then(action => {
                    // 跳转到积分列表
                    setTimeout(function () {
//                      that.$router.push({path: "/register"});
                        that.$router.push({path: '/register', query: {type: 'fansbind'}});
                    }, 3000);
                });
            } else if (userinfo.vipcode) {
                // 如果缓存有vipcode 说明注册成功
                // 绑定过提示已经绑定
                MessageBox({
                    title: "提示",
                    message: "您已经注册过会员，去逛逛",
                    showCancelButton: true,
                    showCancelButton: false,
                    confirmButtonText: "去逛逛",
                    closeOnClickModal: false,
                    confirmButtonClass: "zcbtn"
                }).then(action => {
                    // 跳转到积分列表
                    that.$router.push({path: "/score"});
                });
            }
        }
    };
</script>

<style scoped lang="less">
    .mint-field-core1 {
        border: 0;
        background-color: #ffffff;
    }

    ul,
    li {
        list-style: none;
    }

    .perfectinput {
        > ul:first-child {
            padding-bottom: 0.2rem;
        }
        .yhxy {
            padding: 0.25rem;
            display: flex;
            align-items: center;
            font-size: 0.28rem;
            a {
                color: #F05DC4;
            }
        }
        .yzm {
            display: flex;
            align-items: center;
            a {
                width: 100%;
            }
            div {
                width: 162px;
                margin-right: 10px;
                .mint-button--primary {
                    margin-right: 10px;
                    background-color: #00b050;
                    color: #ffffff;
                    font-size: 15px;
                }
            }

        }
        .zcbtn {
            padding: 0.2rem;
        }
    }

    .hyts {
        text-align: center;
        padding-top: 0.7rem;
        padding-bottom: 0.5rem;
        .hynh {
            font-size: 0.4rem;
            color: #F05DC4;
            font-weight: bold;
            padding-bottom: 0.2rem;
        }
        .tswz {
            font-size: 0.24rem;
        }
    }

    // 提示
    .zccg {
        width: 100%;
        top: 0;
        .zccgbox {
            // padding-top: 0.7rem;
            position: fixed;
            z-index: 10;
            width: 80%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            // height: 7.5rem;
            height: 70%;
            background-color: #ffffff;
            // color: #ffffff;
            text-align: center;
            .btnbox {
            	width: 100%;
            	position: absolute;
            	top: 5rem;
            	z-index: 8;
            }
            .tobtn {
            	width: 80%;
            	height: 0.8rem;
            	background: #FFFFFF;
            	border-radius: 0.12rem;
            	line-height: 0.8rem;
            	text-align: center;
            	color: #f05dc4;
            	margin: 0.16rem auto;
            	overflow: hidden;
            	text-overflow: ellipsis;
            	white-space: nowrap;
            }
            .ewmBtn {
            	position: absolute;
            	left: 0;
            	top: 4.4rem;
            	width: 100%;
            	height: 1.4rem;
            	z-index: 9;
            }
            img.ph {
            	width: 100%;
            	height: 8.2rem;
            }
            .zero {
                position: absolute;
                left: 0;
                top: 5.1rem;
                width: 7.5rem;
                height: 0.66rem;
            }
            .one {
                
            }
            .two {
                
            }
            .three {
                
            }
            // h1 {
            //   font-size: 0.9rem;
            // }

            // .xz {
            //   p {
            //     font-size: 0.36rem;
            //     color: #fce8c7;
            //   }
            //   p:first-child {
            //     padding-top: 0.5rem;
            //   }
            // }

            // .btn {
            //   background-color: #e20010;
            //   color: #ffffff;
            //   font-size: 0.6rem;
            //   width: 3.5rem;
            //   margin: auto;
            //   border-radius: 0.3rem;
            //   margin-top: 1rem;
            //   padding: 0.2rem 0;
            // }
        }
        .zccgbg {
            background-color: #ffffff;
            position: fixed;
            opacity: 0.7;
            width: 100%;
            height: 100vh;
            top: 0;
            z-index: 9;
        }
    }

    #btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 4px;
        border: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: inherit;
        display: block;
        font-size: 18px;
        height: 41px;
        line-height: 41px;
        outline: 0;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 162px;
        margin-right: 10px;
        background-color: #00b050;
        color: #ffffff;
        font-size: 15px;
        &::after {
            background-color: #000;
            content: " ";
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute;
        }
    }

    .is-disabled {
        opacity: .6;
    }
    .zcewm {
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		img {
			width: 6rem;
			height: 7.5rem;
		}
	}
</style>
// 您的系统资料异常，请先至乐宾百货5楼贵宾厅，核实您的信息后，再进行绑定
